<template>
  <div>
  <el-card>
    <div>曹康</div>
     <div class="tool">
      <i class="el-icon-info" />
      共{{total}}记录
    </div >
     <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="type"
        label="操作类型"
        width="90"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="author"
        label="操作人"
        width="120"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="title"
        label="执行结果">
      </el-table-column>
       <el-table-column
        prop="display_time"
        align="center"
        label="执行时间">
      </el-table-column>
       <el-table-column
        prop="forecast"
        align="center"
        label="执行描述">
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-row  type="flex" justify="end" class="footer">
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="page.page"
       :page-sizes="[10, 20, 30, 50]"
       :page-size="page.limit"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
       background
       >
     </el-pagination>
    </el-row>
  </el-card>
  </div>
</template>

<script>
// import PageTool from '../components/page-tool.vue'
import { list } from '@/api/example/table.js'
export default {
  data () {
    return {
      tableData: [],
      page: {
        Page: 1, // 请求的页数
        limit: 10 // 每页请求的条数
      },
      total: 0
    }
  },

  created () {
    this.loadBlogList()
  },
  components: {
  },
  methods: {
    async  loadBlogList () {
      const res = await list(this.page)
      this.tableData = res.data.items
      this.total = res.data.total
    },
    // 每页显示的条数变更以后触发
    handleSizeChange (val) {
      this.page.pagesize = val
      this.loadBlogList()
    },
    // 当前页面发生变化时触发
    handleCurrentChange (val) {
      this.page.page = val
      this.loadBlogList()
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card{
  margin: 20px;
}
 .tool {
      background-color: #f4f4f5;
      margin: 0;
      height: 30px;
      line-height: 30px;
      font-size: 13px;
       i {
         margin-left: 10px;
      margin-right: 5px;
       font-size: 16px;
      color: #909399;
    }
    }
    .footer{
     margin-top: 20px;
    }
</style>
